import { PropType } from "vue";

export const DateUnitsMap: { [key: string]: string } = {
  D: "日",
  W: "周",
  M: "月",
};
export const MciDateTypeSwitch = defineComponent({
  name: "MciDateTypeSwitch",
  props: {
    modelValue: {
      type: String as PropType<"D" | "W" | "M">,
      default: "D",
    },
    customDateMap: {
      type: Object,
      default: null,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const dateType = ref("D");

    watch(
      () => props.modelValue,
      (val) => {
        dateType.value = val;
      },
      { immediate: true }
    );

    watch(dateType, (val) => {
      emit("update:modelValue", val);
    });

    return {
      dateType,
    };
  },
  render() {
    return (
      <div class="mci-date-type-switch clearfix">
        <div
          class="flex p-3 rounded-4 float-left"
          style="    border: 1px solid var(--color-fill-3);background-color:var(--color-fill-2)"
        >
          {Object.keys(this.customDateMap || DateUnitsMap).map((dateKey) => {
            return (
              <div
                class={["cursor-pointer px-12 py-4 rounded-4"]}
                style={`${
                  this.dateType === dateKey &&
                  "color:var(--color-brand-6); background:white"
                }`}
                onClick={() => {
                  this.dateType = dateKey;
                }}
              >
                {this.customDateMap[dateKey] || DateUnitsMap[dateKey]}
              </div>
            );
          })}
        </div>
      </div>
    );
  },
});
